<template>
  <section class="comment-input">
    <div v-if="userData" class="avatar-body">
      <nuxt-link :to="'/user/' + userData.userId + '?name=' + userData.name" class="avatar">
        <img :src="userData.avatar" alt="">
      </nuxt-link>
    </div>
    <div class="input-body">
      <el-input
        ref="input"
        v-model="commentContent"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        :placeholder="placeholder"
      />
      <div class="ctrl-panel">
        <el-button type="primary" size="mini" :disabled="isDisableUpload" @click="uploadComment">
          评论
        </el-button>
      </div>
    </div>
  </section>
</template>

<script>
import { checkUserData } from '~/assets/js/util'
export default {
  name: 'CommentInput',
  props: {
    targetType: {
      type: String,
      default: () => 'article'
    },
    targetId: {
      type: String,
      default: () => ''
    },
    targetUserId: {
      type: String,
      default: () => ''
    },
    targetName: {
      type: String,
      default: () => ''
    },
    focusid: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      isDisableUpload: true,
      commentContent: ''
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    },
    placeholder() {
      if (this.targetType === 'comment') {
        return `回复${this.targetName}...`
      }
      return '请输入评论...'
    }
  },
  watch: {
    commentContent(newVal) {
      if (newVal.trim().length !== 0) {
        this.isDisableUpload = false
      }
    },
    focusid(newVal) {
      if (newVal) {
        this.$refs.input.focus()
      }
    }
  },
  methods: {
    async uploadComment() {
      const res = checkUserData(this)
      if (!res) return
      const params = {}
      let url = ''
      if (this.targetType === 'article') {
        params.articleId = this.targetId
        params.content = this.commentContent.trim()
        url = 'articleComment/comment'
      } else if (this.targetType === 'comment') {
        params.commentId = this.$attrs['article-comment-id']
        params.replyCommentId = this.targetId
        params.content = this.commentContent.trim()
        params.targetUserId = this.targetUserId
        url = 'articleCommentReply/comment'
      }

      const data = await this.$request({
        context: this,
        method: 'post',
        url,
        params
      })
      if (!data) return
      // 通知 Comment 组件刷新评论列表
      this.commentContent = ''
      if (this.targetType === 'article') {
        this.$emit('newArticleComment')
      } else if (this.targetType === 'comment') {
        this.$emit('newReplyComment')
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/assets/css/public";
  .comment-input {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-radius: 4px;

    .avatar-body {
      width: 42px;
      margin-right: 20px;

      a.avatar {
        display: block;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        overflow: hidden;
        img {
          @include inner-img;
        }
      }
    }
    .input-body {
      flex: 1;
      .ctrl-panel {
        display: flex;
        justify-content: flex-end;

        .el-button {
          margin-top: 10px;
        }
      }
      .el-textarea  {
        .el-textarea__inner {
          background: $theme-color-background;
        }
      }
    }
  }
</style>
